<template>
	<view class="page_">
		<pageheader :setting="settingdata"></pageheader>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="_sticky" :style="'top:'+navH+'px'">
			<view class="searchTop">
				<view class="searchContent">
					<u-icon name="search" color="#B1B8C8" size="28" class="search_icon" @click="demand"></u-icon>
					<!-- <u-input v-model="searchKey" placeholder="搜索供应" type="text" confirm-type="search" :border="false"
						placeholderStyle="color:#B1B8C8" class="search_" :clearable="false" @confirm="demand"
						disabled /> -->
					<view class="search_" @click="tosearch">{{searchKey==''?'搜索求购':searchKey}}</view>
					<u-icon name="close-circle" color="#B1B8C8" size="28" class="clo_icon" @click="clearinput"
						v-if="searchKey!=''"></u-icon>
				</view>
				<u-button type="success" size="mini" ripple="true" shape="circle" @click="demand()" throttle-time="1000"
					v-if="searchKey!=''">
					搜索
				</u-button>
				<u-button type="success" size="mini" ripple="true" shape="circle" @click="reset()" throttle-time="1000"
					v-if="searchKey==''">
					重置
				</u-button>
			</view>
			<view class="ifboxs">
				<view class="ifone" @click="showregion">
					<text :style="region?'color:#38BE8C':''" class="clamp1">{{citys.name?citys.name:'地区'}}</text>
					<u-icon :name="region?'arrow-up':'arrow-down'" :color="region?'#38BE8C':'#666666'" size="24">
					</u-icon>
				</view>
				<!-- 显示分类 -->
				<view class="ifone" @click="showcatgory">
					<text :style="catgory?'color:#38BE8C':''" class="clamp1">{{flname}}</text>
					<u-icon :name="catgory?'arrow-up':'arrow-down'" :color="catgory?'#38BE8C':'#666666'" size="24">
					</u-icon>
				</view>

				<view class="ifone" @click="showprice">
					<text :style="price_sort?'color:#38BE8C':''"
						class="clamp1">{{price==0?'价格':(price==1?"价格降序":'价格升序')}}</text>
					<u-icon :name="price_sort?'arrow-up':'arrow-down'" :color="price_sort?'#38BE8C':'#666666'"
						size="24">
					</u-icon>
				</view>

				<view class="ifone" @click="showdistance">
					<text :style="distance?'color:#38BE8C':''">{{dissort==0?'距离':(dissort==1?"距离降序":'距离升序')}}</text>
					<u-icon :name="distance?'arrow-up':'arrow-down'" :color="distance?'#38BE8C':'#666666'" size="24">
					</u-icon>
				</view>

				<view class="ifone" @click="goscreen" v-if="cate_id!=0">
					<text>筛选</text>
					<u-icon name="arrow-down" color="#666666" size="24"></u-icon>
				</view>
			</view>
		</view>

		<view style="position: relative;">
			<view class="mask" catchtouchmove="dismov" v-if="distance" @click="closemask">
				<view class="distancebox" catchtouchmove="dismov">
					<view :class="dissort==1?'disac flex_bet_align':'flex_bet_align'" @click="discheck(1)">
						<text>距离降序</text>
						<u-icon :name="dissort==1?'checkbox-mark':''" :color="dissort==1?'#38BE8C':'#666666'" size="24">
						</u-icon>
					</view>
					<view :class="dissort==2?'disac flex_bet_align disced':'flex_bet_align disced'"
						@click="discheck(2)">
						<text>距离升序</text>
						<u-icon :name="dissort==2?'checkbox-mark':''" :color="dissort==2?'#38BE8C':'#666666'" size="24">
						</u-icon>
					</view>
				</view>
			</view>
			<view class="mask" catchtouchmove="dismov" v-if="price_sort" @click="closemask">
				<view class="distancebox" catchtouchmove="dismov">
					<view :class="price==1?'disac flex_bet_align':'flex_bet_align'" @click="pricecheck(1)">
						<text>价格降序</text>
						<u-icon :name="price==1?'checkbox-mark':''" :color="price==1?'#38BE8C':'#666666'" size="24">
						</u-icon>
					</view>
					<view :class="price==2?'disac flex_bet_align disced':'flex_bet_align disced'"
						@click="pricecheck(2)">
						<text>价格升序</text>
						<u-icon :name="price==2?'checkbox-mark':''" :color="price==2?'#38BE8C':'#666666'" size="24">
						</u-icon>
					</view>
				</view>
			</view>

			<view class="wantedbox" v-if="catgory||region?false:true">
				<view class="onewanted" v-for="(item,tags) in list" :key="tags">
					<navigator :url="'/home/index/wantedetail?id='+item.id+'&is_bj='+item.is_bj" hover-class="none"
						class="wantedinfo">
						<text class="clamp1 infoname">{{item.title}}</text>
						<text class="infonumbers">求购数量：{{item.number}}{{item.unit}} 丨{{item.stoptime}}截止</text>
						<text class="infoarea">求购地区：{{item.city}}</text>
						<text class="infoarea">{{'距离:'+item.distance+'km'}}</text>
						<view class="hover_box">
							<image :src="item.mimage" v-if="item.mimage" mode="heightFix"></image>
							<view class="xinyong_box">
								<view class="xin">信</view>
								<view class="xin_number">{{item.credit_value}}</view>
								<view class="shiming" v-if="item.realname">实</view>
								<text class="bjnumbers">{{item.bj_num}}个报价</text>
							</view>
						</view>
					</navigator>
					<view class="wantedrights">
						<text>{{item.createtime}}</text>

						<view class="goprice" v-if="item.is_bj">已报价</view>
						<view class="goprice" v-else @click="togetgood(item.id)">{{item.is_bj?'已报价':'去报价'}}</view>
					</view>
				</view>
				<view class="not_more" v-if="list.length<1">
					<image src="../../static/img/wsousuo.png" mode="widthFix"></image>
					<view class="text">暂无商品</view>
				</view>
				<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
			</view>
		</view>
		<view class="allcheck" v-if="region" catchtouchmove="dismov">
			<view class="acont" @click="reset(1)">全国</view>
			<view class="acont" @click="allprovince">全省</view>
			<view class="acont" @click="allcity">全市</view>
		</view>

		<!-- 地区搜索 -->
		<view class="catgorybox" v-if="region">
			<scroll-view scroll-y="true" class="region">
				<block v-for="(item,index) in provincelist" :key="index">
					<view class="kindsone" :style="item.id==province.id?'color:#38BE8C':''"
						@click="getcity(item.id,item.name)">{{item.name}}</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y="true" class="region">
				<block v-for="(item,index) in citylist" :key="index">
					<view class="kindsone" :style="item.id==city.id?'color:#38BE8C':''"
						@click="getarea(item.id,item.name)">{{item.name}}</view>
				</block>
			</scroll-view>
			<scroll-view scroll-y="true" class="region">
				<block v-for="(item,index) in arealist" :key="index">
					<view class="kindsone" :style="item.id==area.id?'color:#38BE8C':''"
						@click="setarea(item.id,item.name)">{{item.name}}</view>
				</block>
			</scroll-view>
		</view>
		<!-- 分类搜索 -->
		<view class="catgorybox" v-if="catgory">
			<view class="leftkinds">
				<block v-for="(item,index) in classone" :key="index">
					<view class="kindsone" :style="classoneopt==index?'color:#38BE8C':''"
						@click="showright(item.id,index)">
						{{item.name}}
					</view>
				</block>
			</view>
			<view class="righkinds" v-if="rightlist.length>0">
				<view class="kindsone" @click="rightSetAll" :style="classtwoopt== -1 ?'color:#38BE8C':''">
					全部</view>

				<block v-for="(item,index) in rightlist" :key="index">
					<view class="kindsone" @click="setclasstwoopt(index)"
						:style="classtwoopt==index?'color:#38BE8C':''">{{item.name}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/App.vue';
	var _this, $paginator;
	export default {
		data() {
			return {
				settingdata: {
					name: '求购大厅',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "supplyhome"
				},

				// 商品列表
				list: [],
				navH: 0,
				// 是否显示二级分类
				catgory: false,
				// 是否显示地区
				region: false,
				// 选中城市信息
				citys: {},
				// 省市区
				province: {},
				city: {},
				area: {},
				provincelist: [],
				citylist: [],
				arealist: [],

				// 搜索框的值
				searchKey: "",
				// 没有更多
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				// 分类id
				cate_id: 0,
				// 分类列表
				classone: [],
				classoneopt: -1,
				classtwoopt: -1,
				// 筛选过来的值
				screen: "",

				waitname: '',

				dissort: 0, //距离的下标
				distance: false, //显示距离筛选
				price: 0,
				price_sort: false, //显示价格筛选
				price_sort_order: '',

				sort_field: '',
				sort_order: '',
				rightlist: [],
				flname: '分类',
				id: '', //分类里面左边分类的id
			}
		},
		onLoad(options) {
			_this = this
			_this.navH = App.globalData.navHeight
			console.log(options)
			_this.searchKey = options.searchKey ? options.searchKey : ""

		},
		onShow() {
			if (wx.getStorageSync("screen")) {
				// console.log(wx.getStorageSync("screen"))
				let arr = wx.getStorageSync("screen")
				let screen = []
				for (let i of arr) {
					screen.push(i.screen)
				}
				_this.screen = screen.join(',')
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)

			} else {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			}
		},
		onUnload() {
			uni.removeStorageSync("screen")
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			//跳转到查询页
			tosearch() {
				console.log(111)
				uni.navigateTo({
					url: '/chat/searchpage'
				})
			},
			// 查询数据
			demand() {
				// _this.catgory = false
				// _this.classoneopt = -1
				// _this.classtwoopt = -1
				// _this.cate_id = 0
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			// 显示地址
			showregion() {
				//获取省
				_this.$api.get("getcitylist", {}).then(data => {
					_this.provincelist = data
					_this.region = !_this.region
					_this.catgory = false
					_this.distance = false
					_this.price_sort = false
				});
			},
			// 获取市
			getcity(city_id, name) {
				_this.waitname = name

				_this.province.id = city_id
				_this.province.name = name
				_this.$api.get("getcitylist", {
					city_id: city_id
				}).then(data => {
					_this.citylist = data
					_this.arealist = []
				});
			},
			// 获取区
			getarea(city_id, name) {
				_this.waitname = name

				_this.city.id = city_id
				_this.city.name = name
				_this.$api.get("getcitylist", {
					city_id: city_id
				}).then(data => {
					_this.arealist = data
				});
			},
			setarea(city_id, name) {
				_this.area.id = city_id
				_this.area.name = name
				_this.region = false
				_this.citys.id = city_id
				_this.citys.name = name
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			// 显示分类
			showcatgory() {
				_this.$api.get("classification", {
					cate_id: 0
				}).then(data => {
					_this.classone = data
					_this.catgory = !_this.catgory
					_this.region = false
					_this.distance = false
					_this.price_sort = false
				});
			},
			showright(id, index) {
				console.log(id)
				_this.id = id
				_this.classoneopt = index
				// _this.classtwoopt = 0
				_this.$api.get("classification", {
					cate_id: id
				}).then(data => {
					_this.rightlist = data
				});
			},
			rightSetAll() {
				_this.cate_id = _this.id
				_this.classtwoopt = -1
				_this.catgory = false
				_this.flname = _this.classone[_this.classoneopt].name
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			showdistance() {
				_this.catgory = false
				_this.region = false
				_this.price_sort = false
				_this.distance = !_this.distance
			},

			// 距离排序
			discheck(e) {
				console.log(e)
				_this.sort_field = 'distance'
				if (e == 1) {
					_this.sort_order = 'desc'
				} else if (e == 2) {
					_this.sort_order = 'asc'
				}
				_this.dissort = e
				_this.distance = false
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			showprice() {
				_this.catgory = false
				_this.region = false
				_this.distance = false
				_this.price_sort = !_this.price_sort
			},
			// 价格排序
			pricecheck(e) {
				console.log(e)
				if (e == 1) {
					_this.price_sort_order = 'desc'
				} else if (e == 2) {
					_this.price_sort_order = 'asc'
				}
				_this.price = e
				_this.price_sort = false
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			closemask() {
				_this.distance = false
				_this.price_sort = false
			},

			allprovince() {
				console.log(_this.province.name)
				_this.citylist = []
				_this.arealist = []
				_this.region = false
				_this.citys.name = _this.province.name
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			allcity() {
				console.log(_this.city.name)
				_this.arealist = []
				_this.region = false
				_this.citys.name = _this.city.name
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			// 根据列表查询
			setclasstwoopt(index) {
				_this.classtwoopt = index
				_this.cate_id = _this.rightlist[index].id
				_this.flname = _this.rightlist[index].name

				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
				_this.catgory = false
			},
			// 重置
			reset(index) {
				_this.catgory = false
				_this.region = false
				_this.distance = false
				_this.price_sort = false

				_this.citys = {}
				_this.province = {}
				_this.city = {}
				_this.area = {}
				if (index == 1) {
					_this.citys.name = '全国'
				} else {
					_this.dissort = 0
					_this.flname = '分类'
					_this.cate_id = 0
					_this.classoneopt = -1
					_this.classtwoopt = -1
					_this.searchKey = ""
					_this.screen = ""
					_this.sort_field = ""
					_this.sort_order = ""
					_this.rightlist = []
					_this.price = 0
					_this.price_sort_order = ''
				}
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			clearinput() {
				_this.searchKey = ""
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			// 跳转到筛选
			goscreen() {
				_this.catgory = false
				_this.region = false
				let data = {}
				data.cate_id = _this.cate_id
				data.city = _this.citys.name ? _this.citys.name : ""
				data.search = _this.searchKey
				data.search_type = 2
				data.lon = uni.getStorageSync("address").long
				data.lat = uni.getStorageSync("address").lat
				uni.navigateTo({
					url: "/home/index/shaixuan?condition=" + JSON.stringify(data)
				})
			},
			// 获取数据
			getdata: function(firstLoad = false) {
				let city
				if (!_this.citys.name || _this.citys.name == '全国') {
					city = ''
				} else {
					city = _this.citys.name
				}
				$paginator.getData('homesearch', {
					cate_id: _this.cate_id,
					city: city,
					search: _this.searchKey,
					search_type: 2,
					screen: _this.screen,
					lon: uni.getStorageSync("address").long,
					lat: uni.getStorageSync("address").lat,
					sort_field: _this.sort_field,
					sort_order: _this.sort_order,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : '',
					price_sort_order: _this.price_sort_order
				}, (data) => {
					$paginator.pageCount = data.goods.total_page
					if (firstLoad) {
						_this.list = data.goods.list ? data.goods.list : []
					} else {
						_this.list = _this.list.concat(data.goods.list)
					}
					console.log(_this.list, 'list')
					_this.nomore = data.nomore
				})
			},

			//是否可以跳转到报价页面
			togetgood(id) {
				_this.$api.get("checkApi", {
					detail_id: id,
					lon: uni.getStorageSync("address").long,
					lat: uni.getStorageSync("address").lat,
					type: 2,
					client_uid: uni.getStorageSync("client_uid") ? uni.getStorageSync("client_uid") : ''
				}).then(data => {
					console.log(data)
					uni.navigateTo({
						url: "/home/index/wanted?id=" + id
					})

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_ {
		display: flex;
		flex-direction: column;
		background: #f1f1f1;
		min-height: 100vh;

		._sticky {
			position: sticky;
			background: #fff;
			z-index: 9;

			.searchTop {
				margin-top: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 20rpx;

				.selectbox {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin: 0;
					width: 120rpx;
					justify-content: center;

					text {
						font-size: 26rpx;
						margin-right: 5rpx;
					}
				}

				.searchContent {
					width: 100%;
					height: 74rpx;
					border-radius: 37rpx;
					background: #f1f1f1;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 28rpx;

					.search_icon {
						margin-left: 32rpx;
					}

					.clo_icon {
						margin-right: 32rpx;
					}

					.search_ {
						color: #B1B8C8;
						font-size: 26rpx;
						flex: 1;
						margin: 0 14rpx;
					}
				}
			}

			.ifboxs {
				padding: 38rpx 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.ifone {
					width: 33.333%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;

					text {
						margin-right: 15rpx;
						color: #333333;
						font-size: 30rpx;
						max-width: 120rpx;
					}
				}
			}
		}

		.allcheck {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			.acont {
				padding: 21rpx 0;
				width: 33.333%;
				text-align: center;
				font-size: 28rpx;
				color: #666666;
				border: 2rpx solid #f3f3f3;
			}
		}

		.wantedbox {
			background: #f2f2f2;
			display: flex;
			flex-direction: column;
			padding: 0 25rpx 25rpx 25rpx;
			overflow-y: auto;
			min-height: calc(100vh - 350rpx);

			.onewanted {
				width: 700rpx;
				padding: 36rpx 28rpx;
				display: flex;
				flex-direction: row;
				margin-top: 16rpx;
				border-radius: 8rpx;
				background-color: #fff;
				justify-content: space-between;

				.wantedinfo {
					display: flex;
					flex-direction: column;
					width: 480rpx;

					.infoname {
						color: #222222;
						font-size: 30rpx;
					}

					.infonumbers {
						margin-top: 23rpx;
						color: #858585;
						font-size: 24rpx;
					}

					.infoarea {
						margin-top: 13rpx;
						color: #858585;
						font-size: 24rpx;
					}

					.hover_box {
						margin-top: 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						image {
							height: 36rpx;
							width: auto;
						}

						.xinyong_box {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 8rpx;

							.xin {
								width: 30rpx;
								height: 30rpx;
								background: #00C575;
								border-radius: 3px 0 0 3rpx;
								text-align: center;
								line-height: 30rpx;
								color: #fff;
								font-size: 20rpx;
							}

							.xin_number {
								background-color: #fff;
								border: 2rpx solid #00C575;
								border-radius: 0 3rpx 3rpx 0;
								color: #00C575;
								font-size: 20rpx;
								text-align: center;
								height: 30rpx;
								line-height: 30rpx;
								min-width: 46rpx;
							}

							.bjnumbers {
								margin-left: 11rpx;
								color: #666666;
								font-size: 20rpx;
							}
						}
					}
				}

				.wantedrights {
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					text {
						color: #9C9C9C;
						font-size: 22rpx;
					}

					.goprice {
						margin-top: 66rpx;
						width: 144rpx;
						height: 54rpx;
						text-align: center;
						line-height: 50rpx;
						border: 2rpx solid #38BE8C;
						border-radius: 27rpx;
						background-color: #fff;
						color: #38BE8C;
						font-size: 28rpx;
					}
				}
			}
		}

		.catgorybox {
			flex: 1;
			display: flex;
			flex-direction: row;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);

			.region {
				width: 33.333%;
				height: calc(100vh - 504rpx);
				display: flex;
				flex-direction: column;
				background-color: #fff;

				.kindsone {
					padding: 21rpx 0;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #666666;
					border: 2rpx solid #f3f3f3;
				}
			}

			.leftkinds {
				width: 174rpx;
				// max-height: calc(100vh - 375rpx);
				display: flex;
				flex-direction: column;
				background-color: #F2F2F2;
				overflow: scroll;
				height: calc(100vh - 375rpx - env(safe-area-inset-bottom));

				.kindsone {
					padding: 21rpx 0;
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #666666;
				}

			}

			.righkinds {
				background-color: #fff;
				flex: 1;
				padding: 0 20rpx;
				height: calc(100vh - 375rpx - env(safe-area-inset-bottom));
				overflow: scroll;
				display: grid;
				grid-template-columns: repeat(3, 33.3%);

				.kindsone {
					padding: 20rpx 0;
					color: #333333;
					font-size: 28rpx;
					text-align: center;
					background: #F6F6F6;
					margin: 10rpx;
				}
			}
		}

		.distancebox {
			background-color: #fff;
			padding: 20rpx 30rpx;
			z-index: 5;
			width: 100%;
			position: absolute;
			top: 0;

			.disced {
				margin-top: 30rpx;
			}

			.disac {
				color: #38BE8C;
			}
		}

		.mask {
			position: fixed;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 1;
		}
	}
</style>
